<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red; margin: 0 auto; display: block;">
			浏览器不支持
		</canvas>
		<canvas id="offCanvas" style="display: none;"></canvas>
	</body>
	<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		canvas.width =1152;
		canvas.height=768;
		var isMouseDown =false;//是否点击
		var scale ;//放大倍数
		var offCanvas = document.getElementById("offCanvas");
		var offContext = offCanvas.getContext("2d");
		
		
	  	var image = new Image();
	  	 image.src ="../img/img-lg.jpg";
	  	 image.onload = function(){
	  	 	offCanvas.width=image.width;
	  	 	offCanvas.height=image.height;
	  	 	scale=offCanvas.width/canvas.width;
	  	 	
	  	   context.drawImage( image , 0 , 0 , canvas.width , canvas.height );
	  	   offContext.drawImage(image,0,0);
	  	 }
	  	 //获取canvas的位置
	  	 function windowToCanvas(x,y){
	  	 	var bbox =canvas.getBoundingClientRect();//获取页面元素的位置（top left right bottom）
	  	 	return　{x:x-bbox.left,y:y-bbox.top};
	  	 }
	  	 //鼠标点击事件
	  	 canvas.onmousedown = function(e){
	  	 	e.preventDefault();//阻止鼠标默认事件；
	  	 		isMouseDown =true;
	  	 //	console.log(e.clientX,e.clientY);//浏览器坐标
	  	 var point = windowToCanvas(e.clientX,e.clientY);
	  	// console.log(point.x,point.y);
	  	drawCanvasWithMangifier(true,point);//绘制放大镜（是否绘制，位置）
	  	 
	  	 }
	  	 //鼠标移动事件
	  	 canvas.onmousemove = function(e){
	  	 	e.preventDefault();//阻止鼠标默认事件；
	  	 	if(isMouseDown==true){//点击加移动
	  	 		 var point = windowToCanvas(e.clientX,e.clientY);
	  	 		//console.log(point.x,point.y);
	  	 			drawCanvasWithMangifier(true,point);//绘制放大镜（是否绘制
	  	 	}
	  	 }
	  	 //鼠标按键被松开时发生
	  	 canvas.onmouseup =function(e){
	  	 	e.preventDefault();//阻止鼠标默认事件；
	  	 	isMouseDown =false;
	  	 drawCanvasWithMangifier(false);
	  	
	  	 }
	  	 //鼠标指针移出指定的对象时
	  	 canvas.onmouseout =function(e){
	  	 	e.preventDefault();//阻止鼠标默认事件；
	  	 	isMouseDown =false;
	  	 	 drawCanvasWithMangifier(false);
	  	 }
	  	 //放大镜函数
	  	 function drawCanvasWithMangifier(isShowMagnifier,point){
	  	 	context.clearRect(0,0,canvas.width,canvas.height);//清空
	  	 	context.drawImage(image,0,0,canvas.width,canvas.height);//重新绘制
	  	 	if(isShowMagnifier==true){
	  	 		drawMagnifier(point);//绘制放大图形
	  	 	}
	  	 }
	  	 //放大镜正方形
	/*  	function drawMagnifier(point){
	  		var imageLG_cx =point.x*scale;
	  		var imageLG_cy =point.y*scale;
	  		var mr =200;//半径
	  		
	  		var sx = imageLG_cx-mr;
	  		var sy =imageLG_cy-mr;
	  		var dx = point.x-mr;
	  		var dy = point.y-mr;
	  		context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);	  		
	  	}*/
	  	//放大镜圆形
	  	 	function drawMagnifier(point){
	  		var imageLG_cx =point.x*scale;
	  		var imageLG_cy =point.y*scale;
	  		var mr =200;
	  		
	  		var sx = imageLG_cx-mr;
	  		var sy =imageLG_cy-mr;
	  		var dx = point.x-mr;
	  		var dy = point.y-mr;
	  		//绘制圆开始   ？？？我的chrome不能用火狐可以
	    	context.save();
            context.lineWidth = 10.0;
            context.strokeStyle = "#069";
            context.beginPath();
            context.arc( point.x , point.y , mr , 0 , Math.PI*2  );//圆
            context.stroke();//绘制
            context.clip();
	  		//结束
	  		context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
	  		context.restore();
	  	}
	</script>
</html>
